<template>
  <div class="profile">
    <!-- 我的 -->
    <!-- 未登录的头部 -->
    <div v-if="!user" class="not-login header">
  <img @click="$router.push('/login')" src="../../assets/images/mobile.png" alt="">
  <span>登陆 / 注册</span>
    </div>

    <!-- 已登陆的头部 -->
<div v-else class="login-box header">
<!-- 用户基本信息 -->
 <div class="user-info">
  <div class="left">
    <img src="../../assets/images/logo.b5a855ee.png" alt="">
    <span class="touxiang">黑马头像</span>
  </div>
 <van-button to="/User" type="default">编辑资料</van-button>
</div>
<!-- 用户数据 -->
<div class="user-data">
<div class="data-item">
  <span>{{userInfo.art_count}}</span>
  <span>头条</span>
</div>
<div class="data-item">
  <span>{{userInfo.fans_count}}</span>
  <span>粉丝</span>
</div>
<div class="data-item">
  <span>{{userInfo.follow_count}}</span>
  <span>关注</span>
</div>
<div class="data-item">
  <span>{{userInfo.like_count}}</span>
  <span>获赞</span>
</div>
</div>
</div>

    <!-- 导航 -->
<van-grid :column-num="2">
  <van-grid-item icon="photo-o" text="收藏" >
  <template #icon>
 <i class="toutiao toutiao-shoucang"></i>
  </template>
 </van-grid-item>

  <van-grid-item icon="photo-o" text="历史" >
    <template #icon>
      <i class="toutiao toutiao-lishi"></i>
    </template>
 </van-grid-item>
</van-grid>

<!-- 其他导航小智同学 -->
<!-- <van-cell-group> -->
  <div class="out-box">
  <van-cell title="消息通知" is-link />
  <van-cell title="小智同学" is-link />
<!-- </van-cell-group> -->
</div>
<van-cell v-if="user"  @click="onLogin" title="退出" class="logout-btn" />
  </div>
</template>

<script>
import { Dialog, Toast } from 'vant'
import { mapState } from 'vuex'
import { getUserSelfInfo } from '@/api/user.js'
export default {
  data () {
    return {
      userInfo: {}// 3.步骤调用
    }
  },
  // 在接口拿到getUserSelfInfo请求后 在这调用
  // async  created () { // 1步骤. 封装成一个下面的函数
  //   const res = await getUserSelfInfo(this.user.token)
  //   console.log(res)
  // },
  computed: {
    ...mapState(['user'])// vuex的方法 在上面引入
  },
  created () {
    this.LoadUserInfo()
  },
  methods: {
    // 点击退出
    onLogin () {
      Dialog.confirm({
        title: '黑马头条',
        message: '是否退出该账号？'
      })
        .then(() => {
          console.log('点击确认')
          this.$store.commit('removeUser')
        })
        .catch(() => {})
    },
    // 2步骤.封装开始
    async LoadUserInfo () {
      try {
        const liziqi = await getUserSelfInfo(this.user.token)
        this.userInfo = liziqi
      } catch (err) {
        Toast('获取用户信息失败')
      }
    }
  }
}
</script>

<style scoped lang="less">
.profile{
  // 都不公共样式
.header{
  width: 750px;
background-size: 100% 100%;
height: 401px;
background-image: url(~@/assets/images/banner.png);
background-size: 100% 100%;
}
// 未登录的样式
.not-login{
// background-color: #879475;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.left{
  display: flex;
  align-items: center;
img{
width: 132px;
height: 132px;
border-radius: 1px solid #fff;
margin-left: 22px;
}
span{
font-size: 30px;
color: #666;
margin-left: 22px;
}
}
}
.van-button{
width: 115px;
height: 52px;
background: #fff;
border-radius: 20px;
font-size: 10px;
color: #666;
padding: 0;
margin-top: 40px;
}

// 已登陆的头部样式
.login-box{
  overflow: hidden;
  .user-info{
width: 100%;
height: 132px;
// background-color: green;
margin-top: 116px;
padding:0 32px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
.touxiang{
font-size: 30px;
color: #fff;
margin-top: 150px;
z-index: 9;
}
span{
font-size: 30px;
color: #fff;
margin-left: 22px;
margin-top: 50px;
}
}
}
.user-data{
width: 100%;
height: 156px;
display: flex;//竖的弄成一行横的
// background-color: red;
.data-item{
flex: 1;//每个占一份
display: flex;
align-items: center;//把一行水平居中
flex-direction: column;//把上下两行子都上下竖排分布
color: #fff;
span:nth-child(1){
  font-size: 26px;
  margin-bottom: 8px;
}
span:nth-child(2){
font-size: 22px;
}
}
}
}
.out-box{
margin: 10px 0;
}
.login-btn
{
text-align: center;
color: red;
}
</style>
